<template>
  <div>
    <!-- 联系人卡片 -->
    <van-contact-card
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
    />

    <!-- 联系人列表 -->
    <!--数据双向绑定-->
    <van-popup v-model="showList" position="bottom">
      <van-contact-list
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </van-popup>

    <!-- 联系人编辑 -->
    <van-popup v-model="showEdit" position="bottom">
      <van-contact-edit
        :contact-info="editingContact"
        :is-edit="isEdit"
        :tel-validator="()=>true"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>

  </div>
</template>

<script>
  /*1. 分析计算属性 及其 依赖
*
*   cardType
*       chosenContactId
*   currentContact
*       chosenContactId
*       list
* */

  import { ContactCard, ContactList, ContactEdit,Popup  } from 'vant';
  const OK = 200;
  export default {
    name: 'contact',
    components:{
      [ContactCard.name]:ContactCard,
      [ContactList.name]:ContactList,
      [ContactEdit.name]:ContactEdit,
      [Popup.name]:Popup
    },
    data() {
      return {
        chosenContactId: null,//控制cardList中哪一个联系人应该被选中
        editingContact: {},//代表被编辑的联系人的信息
        showList: false, //控制cardList能否显示
        showEdit: false, //控制cardEdit能否显示
        isEdit: false,  //控制编辑页要不要显示删除按钮
        list: [], //联系人数组
      };
    },
    computed: {
      cardType() {
        return this.chosenContactId !== null ? 'edit' : 'add';
      }, //控制card组件处于何种模式 : add edit

      currentContact() {
        const id = this.chosenContactId;
        return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
      }, //控制了当card处于edit模式时 需要回显的信息
    },
    methods: {
      //发送请求去更新list
      async updateList(){
        //发送请求获取list
        const {code,data} = await this.$http.get("/contactList");
        if(code === OK){
          this.list = data
        }
      },


      // 添加联系人
      onAdd() {
        //代表新增一个联系人;为当前这个联系人分配了一个id
        this.editingContact = { };
        //确定新增逻辑 肯定不会出现删除按钮
        this.isEdit = false;
        //将编辑页显示出来
        this.showEdit = true;
      },

      // 编辑联系人
      onEdit(item) {
        //item:当前联系人对象
        //确定是编辑逻辑  待会编辑组件显示的时候 会带上删除按钮
        this.isEdit = true;
        //将编辑页显示出来
        this.showEdit = true;
        //编辑页要回显的内容
        this.editingContact = item;
      },

      // 选中联系人
      onSelect() {
        //将list组件隐藏起来
        this.showList = false;
        //chosenContactId也会被改变
      },

      // 保存联系人
      async onSave(info) {
        //info : 表单内容
        //将list edit页全部关掉
        this.showEdit = false;
        this.showList = false;

        //this.isEdit 控制是否出现删除按钮
        if (this.isEdit) {
          //编辑的逻辑
          /*this.list = this.list.map( item =>
            //item 每一个联系人
            //info.id 当前编辑的那个联系人的id
            item.id === info.id ? info : item
          );*/
          const {code,data} = await this.$http.put("/contact/edit",info);
          if(code === OK){
              await this.updateList()
          }
          //将编辑的那个联系人 作为 选中的那一个
          this.chosenContactId = data.id;
        } else {
          //新增的逻辑  发送请求去新增数据
          // this.list.push(info);
          // const {code,data} = await this.$http.post("/contact/new/json",info);
          const formData = new FormData();
          formData.append("name",info.name)
          formData.append("tel",info.tel)
          const {code,data} = await this.$http.post("/contact/new/form",formData);
          if(code === OK){
            //一般做完CUD操作后 要再次发送get请求去数据库获取数据 更新界面
            //对list的更新是异步的 会导致chosenContactId被先更新 list才会得到更新
            //如果完全不出现报错  必须先更新list 再更新chosenContactId
            //加上await之后  143代码必须要等141行执行完之后才会执行
            await this.updateList()
            //将新增的那个联系人(data.id) 作为 选中的那一个
            this.chosenContactId = data.id;
          }
        }
      },

      // 删除联系人
      async onDelete(info) {
        //将编辑组件隐藏起来
        this.showEdit = false;
        //修改list
        // this.list = this.list.filter((item) => item.id !== info.id);
        const {code} = await this.$http.delete("/contact",{
          params:{
            id:info.id
          }
        })
        if(code===OK){
          //加了await 先更新list 再更新chosenContactId
          //如果完全不出现报错  必须先更新chosenContactId 再更新list

          //修改chosenContactId  如果你要删除的那一条正好是当前选中的那一条 将chosenContactId置为null
          if (this.chosenContactId === info.id) {
            this.chosenContactId = null;
          }

          await this.updateList()
        }
      },
    },
    async created(){
      //发送请求 去数据库获取当时list的数据
      await this.updateList()
    }
  }
</script>

<style scoped>

</style>
